<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <md-popup-title-bar title="乘车方式" ok-text="确认" cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
    <div class="container">
      <md-picker ref="picker" :data="types" :cols="1" :default-index="pickerDefaultIndex" is-view @change="onPickerConfirm" @initialed="pickerInited"></md-picker>
    </div>
  </md-popup>
</template>

<script>
import { Popup, PopupTitleBar, Picker } from 'mand-mobile';
export default {
  name: 'type-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    },
    types: {
      type: Array,
      default: () => {
        return [
          [
            {
              text: '拼车',
              value: 1
            },
            {
              text: '包车',
              value: 2
            }
          ]
        ];
      }
    }
  },
  data() {
    return {
      pickerDefaultIndex: [0],
      selected: 0
    };
  },
  methods: {
    confirm() {
      this.value = false;
      this.$emit('submit', this.selected);
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    pickerInited() {
      this.$refs.picker.refresh();
      this.selected = this.$refs.picker.getColumnValue(0);
    },
    onPickerConfirm(columnIndex, itemIndex, value) {
      this.selected = value;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  }
};
</script>

<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    height: 432px;
    width: 100vw;
    float: left;
    font-size: 22px;

    .hint {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 88px;

      .hint-icon {
        width: 26px;
        height: 24px;
      }

      .hint-str {
        color: theme-color;
      }
    }

    .flex-box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 88px;

      .waiting-hint {
        display: -webkit-box;
        font-size: 22px;

        .hint-icon {
          width: 26px;
          height: 24px;
        }

        .hint-str {
          color: theme-color;
        }

        .waiting-hint {
          color: color-text-caption;
          max-width: 26em;
          text-align: center;
        }
      }
    }
  }
}
</style>
